<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <view class="Mall4j component-create-popup">
    <view class="mask" />
    <view class="content-box">
      <!-- <slot name="header"></slot> -->
      <view class="header">
        {{ config.header }}
      </view>
      <input
        v-model="inputValue"
        type="text"
        class="input-box"
        :placeholder="config.placeholder"
        :maxlength="config.maxlength"
      >
      <view class="footer">
        <view
          class="footer-item"
          @tap="cancal"
        >
          {{ config.cancalText }}
        </view>
        <view
          class="footer-item primary"
          @tap="submit"
        >
          {{
            config.submitText
          }}
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onMounted } from 'vue'

const emit = defineEmits(['cancal', 'submit'])

const props = defineProps({
  config: {
    type: Object,
    default () {
      return {
        header: '头部',
        placeholder: '请输入xxxx',
        cancalText: '取消',
        submitText: '确定',
        submitTip: '提示信息',
        maxlength: 999
      }
    }
  },
  inputVal: {
    type: String,
    default: ''
  },
  // 是否必填
  isRequired: {
    type: Boolean,
    default: false
  },
  // 输入值校验及提示
  regTip: {
    type: Object,
    default () {
      return {
        reg: '', // 校验正则表达式
        regTip: ''
      }
    }
  }
})

const inputValue = ref('')

onMounted(() => {
  inputValue.value = props.inputVal
})

const validation = () => {
  if (props.isRequired) {
    if (!inputValue.value.trim()) {
      uni.showToast({
        title: props.config.submitTip,
        mask: true,
        icon: 'none',
        duration: 1500
      })
      return false
    }
    if (props.regTip.reg === '') return true
    if (props.regTip.reg.test(inputValue.value)) {
      uni.showToast({
        title: props.regTip.regTip,
        mask: true,
        icon: 'none',
        duration: 1500
      })
      return false
    }
  }
  return true
}

const cancal = () => {
  emit('cancal')
}

const submit = () => {
  if (validation()) {
    emit('submit', inputValue.value)
  }
}

</script>

<style lang="scss" scoped>
.component-create-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;

  @keyframes window-open {
    0% {
      opacity: 0;
      -webkit-transform: scale3d(1.3, 1.3, 1.3);
    }

    100% {
      opacity: 1;
      -webkit-transform: scale3d(1, 1, 1);
    }
  }

  .content-box {
    box-sizing: border-box;
    width: 610rpx;
    height: 328rpx;
    border-radius: 10rpx;
    background-color: #ffffff;
    padding-top: 36rpx;
    animation: window-open 0.4s 1;
    z-index: 10;

    .header {
      font-size: 28rpx;
      font-weight: bold;
      line-height: 40rpx;
      color: #333333;
      display: flex;
      justify-content: center;
      margin-bottom: 36rpx;
    }

    .input-box {
      box-sizing: border-box;
      width: 550rpx;
      height: 80rpx;
      background: #f7f8fa;
      border: 2rpx solid #f0f1f2;
      border-radius: 4rpx;
      margin: 0 auto 50rpx;
      font-size: 28rpx;
      padding: 0 24rpx;
    }

    .footer {
      border-top: 2rpx solid #eeeff0;
      height: 80rpx;
      font-size: 28rpx;
      display: flex;
      align-items: center;

      .footer-item {
        flex: 1;
        text-align: center;
      }

      .footer-item.primary {
        color: #2b4499;
      }
    }
  }
}
</style>
